<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地注册</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <model1></model1>

</div>
<script>
    //定义一个组件对象
    let model1 = {
        // template:HTML 内容
        template:"<div><h1>{{title}}</h1><button @click='alert'>点</button></div>",
        data: function (){
            return {
                title:"本地注册"
            };
        },
        methods: {
            alert:function () {
                alert("本地注册组件")
            }
        }
    };
    // 定义一个简单的组件 可以只有template
    let model2 = {template: "<h2>MODEL2的内容</h2>"}
    new Vue({
        el: "#app",
        data: {},
        // 本地注册的组件，只能在当前vue绑定的元素上使用
        components:{model1,model2}

    });
</script>
</body>
</html>